<template>
	<view class="card-item">
		<navigator :url="type === 'course' ? `/pages/course/detail/detail?id=${item.id}` : '/pages/teacher/teacher'">
			<image class="item-img" :src="type === 'course' ? item.cover : item.avatar" mode="widthFix"></image>
		</navigator>
		<block v-if="type === 'course'">
			<view class="item-content">
				<text class="content-title">{{ item.title }}</text>
				<view class="content-info">
					<uni-icons type="fire" size="20" color="#f00"></uni-icons>
					<text>{{ item.lessonNum }}人已学习</text>
				</view>
			</view>
			<view class="item-sale">
				<text class="sale-price">￥{{ item.price }}</text>
				<text class="sale-count"> &nbsp;{{ item.buyCount }}人购买</text>
			</view>
		</block>
		<block v-else>
			<view class="teacherInfo">
				{{ item.intro }}
			</view>
			<view class="teacherName">
				{{ item.name }}
			</view>
		</block>

	</view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps(['item', 'type']) //接收课程列表数据
</script>

<style lang="less" scoped>
.card-item {
	width: 335upx;
	background-color: #eee;
	margin-top: 20upx;

	.item-img {
		width: 100%;
		// height: 200upx;
	}

	.item-content {
		.content-title {
			font-size: 26upx;
			font-weight: bold;
		}

		.content-info {
			font-size: 24upx;
			padding: 10upx 0;
		}
	}

	.item-sale {
		.sale-price {
			font-size: 28upx;
			font-weight: bold;
			color: #f00;
		}

		.sale-count {
			font-size: 26upx;
		}
	}

	.teacherInfo {
		font-size: 26upx;
		font-weight: bold;
		white-space: pre-wrap;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.teacherName {
		font-weight: bold;
		color: #00cc99;
		font-size: 30upx;
		padding: 6px;
	}
}
</style>